<template>
  <div class="main">

    <van-nav-bar
      left-arrow
      title="文章详情"
      @click-left="onClickLeft"
      fixed
      :placeholder='true'
    />

    <!-- 文章作者头像 -->
    <van-cell
      is-link
      class="van-cell"
      v-if="item"
    >
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <!-- //文章标题 -->
        <span class="custom-title  titles">{{item.title}}</span>
      </template>
      <!-- 文章头像及作者名字 -->
      <template #label>
        <span class="custom-title">
          <van-image
            round
            width="66px"
            height="66px"
            :src="item.aut_photo"
          />
          <div class="noer">
            <!-- 作者 -->
            <p>{{item.aut_name}}</p><br>
            <!-- 时间 -->
            <p>{{getTime(item.pubdate)}}</p>
          </div>
        </span>
      </template>

      <!-- 关注 -->
      <template #right-icon>
        <div
          class="payAttentionTo "
          :class="{backr:boler}"
          @click="payAttentionTo(item.aut_id)"
        >
          {{boler?'已关注':'+ 关注'}}
        </div>
      </template>
    </van-cell>
    <!-- 文章内容 -->

    <div
      v-if="item"
      class="art-content"
      v-html="item.content"
    >

    </div>
    <!-- 点赞 -->
    <div class="like-box">
      <van-button
        icon="good-job"
        type="danger"
        size="small"
        v-if="like"
        @click="nolink"
      >已点赞</van-button>
      <van-button
        icon="good-job-o"
        type="danger"
        plain
        size="small"
        v-else
        @click="linkAli"
      >点赞</van-button>
    </div>
    <div class="distance">
      <CommentList
        v-for="(item,index) in list "
        :key="index"
        :item='item'
      ></CommentList>
    </div>

    <!-- //底部搜索 -->
    <div class="serchr">
      <!-- 底部搜索 -->
      <van-search
        placeholder="发表评论"
        :show-action='true'
        left-icon
        v-if="show1"
        @focus="showr"
      >
        <template #left>
          <van-icon
            name="arrow-left"
            @click="returen"
          />
        </template>
        <template #action>
          <!-- 评论条数 -->
          <van-icon
            name="chat-o"
            :badge="list.length"
            size="20px"
            @click="scrolls"
          />
          <!-- 收藏-->
          <van-icon
            name="star-o"
            size="20px"
            class="right_icon"
            @click="collect"
          />
          <!-- 转发 -->
          <van-icon
            name="share-o"
            size="20px"
            @click="forward"
          />
          <van-share-sheet
            v-model="showShare"
            :options="options"
            title="立即分享给好友"
          />

        </template>
      </van-search>
    </div>
    <form
      action="/"
      class="serchr"
    >
      <!-- 发布评论 -->
      <van-search
        v-if="show2"
        v-model="value"
        show-action
        left-icon
        v-foucs
        @blur="cancel"
        placeholder="请发表评论"
      >

        <template #action>
          <div
            @touchstart="Search"
            class="fabu"
          >发布</div>
        </template>
      </van-search>
    </form>
  </div>
</template>

<script>
import CommentList from './CommentList/index.vue'
import {
  getarticleDetails,
  setTheAuthorId,
  unsubscribe,
  getComments,
  getTheArticleLikes,
  setNotLike,
  releaseComment
} from '@/api/readArtcle.js'
import moment from 'moment'
// 导入局部组件必须在scrip里面导入,在App里面导入
export default {
  // 组件名称
  name: '',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 接收局部注册的组件
  components: {
    CommentList
  },
  // 组件数据
  data () {
    return {
      show1: true,
      show2: false,
      value: '',
      id: null,
      item: null,
      boler: false,
      // 转发
      showShare: false,
      // 点赞
      like: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      list: []
    }
  },
  async activated () {
    // 获取文章详情this.$route.params.id
    this.id = this.$route.params.id
    // console.log(this.id)
    const arr = await getarticleDetails(this.id)
    this.item = arr.data.data
    // console.log(arr.data.data)
    // 获取文章评论  文章id
    this.getComments()
  },
  methods: {
    // 获取评论
    async getComments () {
      const ary = await getComments(this.item.art_id)
      // console.log(ary.data.data.results);
      this.list = ary.data.data.results
    },
    onClickLeft () {
      this.$router.push({
        path: '/layout'
      })
    },
    getTime (val) {
      moment.locale('zh-cn')
      return moment(val, 'YYYYMMDD').fromNow()
    },
    // 获得焦点
    showr () {
      // console.log(1);
      this.show1 = !this.show1
      this.show2 = !this.show2
    },
    // 发布评论
    Search () {
      // console.log(1);
      if (this.value !== '') {
        releaseComment(this.item.art_id, this.value)
        setTimeout(() => {
          this.getComments()
        }, 1000)
        this.$toast('发布成功')

        this.scrolls()
        this.value = ''
        // console.log(arr);
        this.show1 = !this.show1
        this.show2 = !this.show2
      } else {
        this.$toast('评论不能为空')
      }
    },
    // 取消发布
    cancel () {
      this.show1 = !this.show1
      this.show2 = !this.show2
    },
    // 关注作者
    payAttentionTo (id) {
      setTimeout(async () => {
        try {
          if (this.boler) {
            let arr = await unsubscribe(id)
            // console.log(arr);
          } else {
            let arr = await setTheAuthorId(id)
            // console.log(arr);
          }
        } catch (error) {
          console.log(error)
        } finally {
          this.boler = !this.boler
        }
      }, 200)
    },
    // 返回
    returen () {
      // console.log(1);
      this.$router.push({
        path: '/layout'
      })
    },
    // 滚动
    scrolls () {
      const div = document.querySelector('.distance')
      document.documentElement.scrollTop = div.offsetTop - 80
    },
    // 收藏
    collect () {
      console.log('收藏')
    },
    // 转发
    forward () {
      // console.log('转发');
      this.showShare = !this.showShare
    },
    // 喜欢文章
    async linkAli () {
      this.like = !this.like
      // console.log(this.item.art_id)
      await getTheArticleLikes(this.item.art_id)
      // console.log(arr)
    },
    // 不喜欢
    nolink () {
      this.like = !this.like
      setNotLike(this.item.art_id)
    }
  }
}
</script>
<style lang='less' scoped>
.fabu {
  width: 100px;
}
.main {
  padding-bottom: 70px;
}
.like-box {
  display: flex;
  justify-content: center;
}
.noer {
  padding-top: 10px;
  p {
    margin: 0 10px;
    line-height: 100%;
  }
}
.van-cell__value {
  width: 100px;
  height: 30px;
}
.art-content {
  font-size: 12px;
  line-height: 24px;
  width: 100%;
  overflow-x: scroll;
  word-break: break-all;
  /deep/ img {
    width: 100%;
  }
  /deep/ pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
.right_icon {
  margin: 0 10px;
}
.serchr {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.backr {
  background: darkturquoise;
  color: #fff;
}
.payAttentionTo {
  position: absolute;
  top: 50px;
  right: 10px;
  width: 60px;
  height: 26px;
  border: 1px solid #ccc;
}
.van-cell {
  align-items: center;
}
.custom-title {
  display: flex;
  position: relative;
}
.tiemr {
  position: absolute;
  top: 70px;
  left: 80px;
}
.titles {
  width: 400px;
  font-weight: 700;
}
.articleContent {
  font-size: 18px;
}
</style>
